<template>
    <div>
        <Dialog v-model="dialogVisible1" title="体检通知" width="620">
            <div class="message_p">
                <el-form ref="ruleFormRef" :model="state.form" :rules="rules" label-width="120px" label-position="top">
                    <div class="flex jcsb">
                        <el-form-item label="职位名称" prop="alltime">
                            <el-input v-model="state.form.alltime" placeholder="名称" type="text" style="width: 260px"/>
                        </el-form-item>
                        <el-form-item label="阶段名称" prop="name">
                            <el-input v-model="state.form.name" placeholder="阶段名称" type="text" style="width: 260px"/>
                        </el-form-item>
                    </div>
                    <div class="flex jcsb">
                        <el-form-item label="环节名称" prop="qdtime">
                            <el-input v-model="state.form.qdtime" placeholder="环节名称" type="text" style="width: 260px"/>
                        </el-form-item>
                        <el-form-item label="截止时间" prop="kstime">
                            <el-date-picker v-model="state.form.kstime" type="datetime" placeholder="截至时间"
                                style="width: 260px" format="YYYY-MM-DD HH:mm" value-format="YYYY-MM-DD_HH:mm"
                                clearable />
                        </el-form-item>
                    </div>
                    <el-form-item label="携带资料" prop="ziliao1">
                        <el-input v-model="state.form.ziliao1" placeholder="携带资料" type="textarea" />
                    </el-form-item>
                    <!-- <el-form-item label="携带资料2" prop="ziliao2">
                        <el-input v-model="state.form.ziliao2" placeholder="携带资料2" type="textarea" />
                    </el-form-item>
                    <el-form-item label="携带资料3" prop="ziliao3">
                        <el-input v-model="state.form.ziliao3" placeholder="携带资料3" type="textarea" />
                    </el-form-item> -->
                    <!-- <el-form-item label="备注" prop="location">
                        <el-input v-model="state.form.location" placeholder="备注" type="textarea" />
                    </el-form-item> -->
                    <el-form-item label="咨询电话" prop="zixun">
                        <el-input v-model="state.form.zixun" placeholder="咨询电话" type="text" />
                    </el-form-item>
                    <div class="flex jcsb">
                        <el-form-item label="是否回复" prop="">
                            <el-checkbox v-model="state.checked" label="是否回复" size="large" />
                        </el-form-item>
                        <el-form-item label="回复截至时间" prop="hftime" v-if="state.checked">
                            <el-date-picker v-model="state.form.hftime" type="datetime" placeholder="回复截至时间"
                                style="width: 100%" format="YYYY-MM-DD HH:mm" value-format="YYYY-MM-DD_HH:mm:ss"
                                clearable />
                        </el-form-item>
                    </div>
                    <el-form-item label="短信通知内容" prop="notices">
                        <el-input v-model="state.form.notices" disabled :autosize="{ minRows: 2 }" type="textarea"
                            placeholder="短信通知内容" />
                    </el-form-item>
                    <div class="flex jcfe aic" style="width: 100%;">
                        <el-button @click="DialogClose()">取消</el-button>
                        <el-button type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
                    </div>
                </el-form>
            </div>
        </Dialog>
    </div>
</template>
<script lang="ts" setup>
import type { FormInstance, FormRules } from 'element-plus'
import { ref, reactive, watch } from 'vue'
import { Dialog } from '@/components/Dialog'
import { ElButton } from 'element-plus'
const dialogVisible1 = ref(false)
const loading = ref(false)
const emit = defineEmits(['CheckupClick'])
const props = defineProps({
    CheckupData: {
        type: Object,
        default: () => {
            return {}
        }
    }

})
interface RuleForm {
    alltime: string
    name: string
    qdtime: string
    kstime: string
    jztime: string
    location: string
    ziliao1: string
    ziliao2: string
    ziliao3: string
    hftime: string
    zixun: string
}
const ruleFormRef = ref<FormInstance>()
    const validateInputContent = (rule, value, callback) => {  
      const regs = /^[^\s]*$/;  //空格 
      if (value === '') {  
        callback(new Error('请输入内容'));  
      } else if (!regs.test(value)) {  
        callback(new Error('支持中文、英文、数字、符号'));  
      } else {  
        callback();  
      }  
    }; 
const rules = reactive<FormRules<RuleForm>>({
    alltime: [{ required: true, message: '必填字段', trigger: 'blur' },
    { min: 1, max: 150, message: '长度限制1~150', trigger: 'blur' },
    // { validator: validateInputContent, trigger: 'blur' },
],
    name: [{ required: true, message: '必填字段', trigger: 'blur' },
    { min: 1, max: 10, message: '长度限制1~10', trigger: 'blur' },{ validator: validateInputContent, trigger: 'blur' },],
    qdtime: [{ required: true, message: '必填字段', trigger: 'blur' },
    { min: 1, max: 10, message: '长度限制1~10', trigger: 'blur' },{ validator: validateInputContent, trigger: 'blur' },],
    kstime: [{ required: true, message: '必填字段', trigger: 'blur' },
    { min: 1, max: 20, message: '长度限制1~20', trigger: 'blur' },
    // { validator: validateInputContent, trigger: 'blur' },
],
    jztime: [{ required: true, message: '必填字段', trigger: 'blur' },
    { min: 1, max: 20, message: '长度限制1~20', trigger: 'blur' },{ validator: validateInputContent, trigger: 'blur' },],
    location: [{ required: true, message: '必填字段', trigger: 'blur' },
    { min: 1, max: 10, message: '长度限制1~10', trigger: 'blur' },{ validator: validateInputContent, trigger: 'blur' },],
    ziliao1: [{ required: true, message: '必填字段', trigger: 'blur' },
    { min: 1, max: 150, message: '长度限制1~150', trigger: 'blur' },{ validator: validateInputContent, trigger: 'blur' },],
    ziliao2: [{ required: true, message: '必填字段', trigger: 'blur' },
    { min: 1, max: 10, message: '长度限制1~10', trigger: 'blur' },{ validator: validateInputContent, trigger: 'blur' },],
    ziliao3: [{ required: true, message: '必填字段', trigger: 'blur' },
    { min: 1, max: 10, message: '长度限制1~10', trigger: 'blur' },{ validator: validateInputContent, trigger: 'blur' },],
    hftime: [{ required: true, message: '必填字段', trigger: 'blur' },
    { min: 1, max: 20, message: '长度限制1~20', trigger: 'blur' },
    // { validator: validateInputContent, trigger: 'blur' },
],
    zixun: [{ required: true, message: '必填字段', trigger: 'blur' },
    { min: 1, max: 11, message: '长度限制1~11', trigger: 'blur' },{ validator: validateInputContent, trigger: 'blur' },],
})
const state = reactive({
    notices1: "您好：现邀请您于____参加____的笔试，具体安排如下：1、签到时间：____ - ____；2、笔试时间：____ - ____（考试时间开始后，迟到____分钟者，不予进入考场）；3、地点：____；4、需携带的资料：____。",
    notices2: "您好：现邀请您于____参加____的笔试，具体安排如下：1、签到时间：____ - ____；2、笔试时间：____ - ____（考试时间开始后，迟到____分钟者，不予进入考场）；3、地点：____；4、需携带的资料：____。收到短信后，务必于____前进行回复，参加请回复1，放弃请回复2。退订请回复R。",
    form: {
        alltime: "",//时间
        qdtime: [],//签到时间
        kstime: [],//考试时间
        ziliao: "",//资料
        hftime: "",//回复
        name: "",//名称
        jztime: "",//截至时间
        location: "",//笔试地点
        notices: "",
    } as any,
    checked: false,
    ruleForm: ["____", "____", "____", "____", "____", "____"]
})
watch(() => state.checked, (newValue, oldValue) => {
    console.log("checked", state.checked);
    state.form.hftime=""
    if (newValue) {
        state.ruleForm.push("____")
    } else {
        state.ruleForm.pop()
    }
    if (newValue) {
        state.form.notices = `您好：恭喜您通过${state.ruleForm[0]}的${state.ruleForm[1]}，现进入${state.ruleForm[2]}环节。请在${state.ruleForm[3]}前登录成都香城英才网应聘端-我的-投递进度-体检审查/录用-上传以下资料。现需您准备资料如下：${state.ruleForm[4]}咨询电话：${state.ruleForm[5]}。收到短信后，务必于${state.ruleForm[6]}前进行回复，参加请回复1，放弃请回复2。退订请回复R。`
    } else {
        state.form.notices = `您好：恭喜您通过${state.ruleForm[0]}的${state.ruleForm[1]}，现进入${state.ruleForm[2]}环节。请在${state.ruleForm[3]}前登录成都香城英才网应聘端-我的-投递进度-体检审查/录用-上传以下资料。现需您准备资料如下：${state.ruleForm[4]}咨询电话：${state.ruleForm[5]}。`
    }
}, { deep: true })
watch(() => state.form, (newValue, oldValue) => {
    console.log("数据监听----", newValue);
    let obj = newValue
    if (obj.alltime) {
        state.ruleForm[0] = obj.alltime
    }
    if (obj.name) {
        state.ruleForm[1] = obj.name
    }
    if (obj.qdtime) {
        state.ruleForm[2] = obj.qdtime

    }
    if (obj.kstime) {
        state.ruleForm[3] = obj.kstime
    }
    if (obj.ziliao1) {
        state.ruleForm[4] = obj.ziliao1
    }
    // if (obj.ziliao2) {
    //     state.ruleForm[5] = obj.ziliao2
    // }
    // if (obj.ziliao3) {
    //     state.ruleForm[6] = obj.ziliao3
    // }
    // if (obj.location) {
    //     state.ruleForm[5] = obj.location
    // }
    if (obj.zixun) {
        state.ruleForm[5] = obj.zixun
    }
    if (state.checked && obj.hftime) {
        state.ruleForm[6] = obj.hftime
    }
    if (state.checked) {
        state.form.notices = `您好：恭喜您通过${state.ruleForm[0]}的${state.ruleForm[1]}，现进入${state.ruleForm[2]}环节。请在${state.ruleForm[3]}前登录成都香城英才网应聘端-我的-投递进度-体检审查/录用-上传以下资料。现需您准备资料如下：${state.ruleForm[4]}。咨询电话：${state.ruleForm[5]}。收到短信后，务必于${state.ruleForm[6]}前进行回复，愿意进入此环节请回复1，放弃请回复2。退订请回复R。`
    } else {
        state.form.notices = `您好：恭喜您通过${state.ruleForm[0]}的${state.ruleForm[1]}，现进入${state.ruleForm[2]}环节。请在${state.ruleForm[3]}前登录成都香城英才网应聘端-我的-投递进度-体检审查/录用-上传以下资料。现需您准备资料如下：${state.ruleForm[4]}。咨询电话：${state.ruleForm[5]}。`
    }

}, {
    deep: true, // 深度监听对象的变化（如果 count 是一个对象的话）  
});
const DialogOpen = () => {
    state.ruleForm=["____", "____", "____", "____", "____", "____"]
    state.form = {
        notices: "您好：恭喜您通过____的____，现进入____环节。请在____前登录成都香城英才网应聘端-我的-投递进度-体检审查/录用-上传以下资料。现需您准备资料如下：____咨询电话：____。"
    }
    state.checked = false
    dialogVisible1.value = true
}
const DialogClose = () => {
    dialogVisible1.value = false
}

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            let obj = {
                logName: state.checked ? "进入审查环节短信回复" : "进入审查环节短信",
                content: state.form.notices,
                param: state.ruleForm,
                templateId: state.checked ? "ba9b621296e74b7793dd7ee8462adbd4" : "7bc2c86b82604ec8bf8fd2473ec5aa23"
            }
            emit('CheckupClick', obj)
        } else {
            console.log('error submit!', fields)
        }
    })
}
// 暴露方法
defineExpose({
    DialogOpen,
    DialogClose
})
</script>
<style lang="less">
.el-dialog__header {
    padding: 10px;
    border-bottom: 1px solid #D8D8D8;
}

.el-dialog__body {
    padding: 20px;
}
</style>
<style lang="less" scoped>
.message_p {
    padding: 0px 10px 20px 10px;
}

.el-button {
    margin-top: 20px;
    min-width: 134px;
    height: 40px;
}
</style>